<template>
	<view class="statistics c-main">
		<view class="u-calendar" v-for="(item, index) in month" :key="index">
			<view class="u-calendar__header">
				<view class="u-calendar__header__text"></view>
			</view>
			<view class="u-calendar__action u-flex u-row-center">
				<text>{{item.year}}年{{item.month}}月</text>
				<text class="tol">￥{{findRecordValMonth(item.year, item.month) | priceFilter}}</text>
			</view>
			<view class="u-calendar__week-day">
				<view class="u-calendar__week-day__text" v-for="(item, index) in ['日', '一', '二', '三', '四', '五', '六']" :key="index">{{item}}</view>
			</view>
			<view class="u-calendar__content">
				<!-- 前置空白部分 -->
				<block v-for="(item, index) in weekByOneDay(item.year, item.month)" :key="index">
					<view class="u-calendar__content__item"></view>
				</block>
				<view class="u-calendar__content__item" v-for="(day, index) in monthDay(item.year, item.month)" :key="index">
					<view class="u-calendar__content__item__inner">
						<view class="wallet-date">
							<text class="date">{{ day }}</text>
							<text class="price" :style="'visibility: '+(findRecordVal(item.year, item.month, day) ? 'visible':'hidden')+';'">{{findRecordVal(item.year, item.month, day) | priceFilter }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			month: {
				type: Array
			},
			record: {
				type: Array
			}
		},
		computed: {},
		data() {
			console.log(this.month)
			return {}
		},
		onReady() {},
		methods: {
			// 通过年月以及第一天获取周
			weekByOneDay(year, month) {
				let date = new Date(year, month - 1, 1)
				return date.getDay();
			},
			monthDay(year, month) {
				month = month - 1
				let days = new Date(year, month + 1, 0).getDate()
				return days
			},
			findRecordVal(year, month, day) {
				let item = this.record.find(element => {
					if (parseInt(element.year) === parseInt(year) && parseInt(element.month) === parseInt(month) && parseInt(element
							.day) ===
						parseInt(day)) {
						return true
					}
					return false
				})
				if (item) {
					return item.val
				}
				return false
			},
			findRecordValMonth(year, month) {
				let total = 0
				this.record.forEach(element => {
					if (parseInt(element.year) === parseInt(year) && parseInt(element.month) === parseInt(month)) {
						total = total + element.val
					}
				})
				return total
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/uview-ui/libs/css/style.components.scss";

	.c-main {
		margin-bottom: 40upx;

		.u-calendar {
			color: $u-content-color;
			background-color: #fff;

			&__header {
				width: 100%;
				box-sizing: border-box;
				font-size: 30upx;
				color: $u-main-color;

				&__text {
					margin-top: 30upx;
					padding: 0 60upx;
					@include vue-flex;
					justify-content: center;
					align-items: center;
				}
			}

			&__action {
				padding: 40upx;
				display: flex;
				justify-content: space-between;
				&__icon {
					margin: 0 16upx;
				}

				&__text {
					padding: 0 16upx;
					color: $u-main-color;
					font-size: 32upx;
					line-height: 32upx;
					font-weight: bold;
				}

				.tol {
					font-size: 24upx;
					color: #2979ff;
					margin-left: 30upx;
				}
			}

			&__week-day {
				@include vue-flex;
				align-items: center;
				justify-content: center;
				padding: 6px 0;
				overflow: hidden;

				&__text {
					flex: 1;
					text-align: center;
				}
			}

			&__content {
				width: 100%;
				@include vue-flex;
				flex-wrap: wrap;
				padding: 6px 0;
				box-sizing: border-box;
				background-color: #fff;
				position: relative;

				.wallet-date {
					display: flex;
					flex-direction: column;
					align-items: baseline;
					justify-content: center;

					.date {
						text-align: center;
						display: inline-block;
						width: 100%;
					}

					.price {
						font-size: 16upx;
						color: #2979ff;
					}

					.getter {
						font-size: 16upx;
						color: #19be6b;
					}
				}

				&--end-date {
					border-top-right-radius: 8upx;
					border-bottom-right-radius: 8upx;
				}

				&--start-date {
					border-top-left-radius: 8upx;
					border-bottom-left-radius: 8upx;
				}

				&__item {
					width: 14.2857%;
					@include vue-flex;
					align-items: center;
					justify-content: center;
					padding: 6px 0;
					overflow: hidden;
					position: relative;
					z-index: 2;

					&__inner {
						height: 86upx;
						@include vue-flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-size: 32upx;
						position: relative;
						border-radius: 50%;

						&__desc {
							width: 100%;
							font-size: 24upx;
							line-height: 24upx;
							transform: scale(0.75);
							transform-origin: center center;
							position: absolute;
							left: 0;
							text-align: center;
							bottom: 2upx;
						}
					}

					&__tips {
						width: 100%;
						font-size: 24upx;
						line-height: 24upx;
						position: absolute;
						left: 0;
						transform: scale(0.8);
						transform-origin: center center;
						text-align: center;
						bottom: 8upx;
						z-index: 2;
					}
				}

				&__bg-month {
					position: absolute;
					font-size: 130px;
					line-height: 130px;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					color: #e4e7ed;
					z-index: 1;
				}
			}

			&__bottom {
				width: 100%;
				@include vue-flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				background-color: #fff;
				padding: 0 40upx 30upx;
				box-sizing: border-box;
				font-size: 24upx;
				color: $u-tips-color;

				&__choose {
					height: 50upx;
				}

				&__btn {
					width: 100%;
				}
			}
		}
	}
</style>
